<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('信息统计')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
  <div class="row">
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="area-pie-chart"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="industry-pie-chart"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6" th:unless="${#lists.isEmpty(rateBar.year1List)}">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="rate1-bar-chart"></div>
        </div>
      </div>
    </div>
    <div class="col-sm-6" th:unless="${#lists.isEmpty(rateBar.year2List)}">
      <div class="ibox float-e-margins">
        <div class="ibox-content">
          <div class="echarts" id="rate2-bar-chart"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
  $(function () {
    let areaPieChart = echarts.init(document.getElementById("area-pie-chart"));
    areaPieChart.showLoading();
    $.ajax({
      cache : true,
      async : true,
      type : "GET",
      url : "/api/project/area",
      dataType: 'json',
      error : function(msg) {
        $.modal.alertError(msg);
      },
      success : function(result) {
        let legendNames = [];
        let data = result.data;
        data.forEach(function (value) {
          legendNames.push(value);
        });
        areaPieChart.hideLoading();
        areaPieChart.setOption({
          title : {
            text: '客户区域分布',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}"
          },
          legend: {
            orient : 'vertical',
            x : 'left',
            data:legendNames
          },
          calculable : true,
          series: [{
            name:'区域分布',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data: data
          }]
        });
      }
    });
    $(window).resize(areaPieChart.resize);

    let industryPieChart = echarts.init(document.getElementById("industry-pie-chart"));
    industryPieChart.showLoading();
    $.ajax({
      cache : true,
      async : true,
      type : "GET",
      url : "/api/project/industry",
      dataType: 'json',
      error : function(msg) {
        $.modal.alertError(msg);
      },
      success : function(result) {
        let legendNames = [];
        let data = result.data;
        data.forEach(function (value) {
          legendNames.push(value);
        });
        industryPieChart.hideLoading();
        industryPieChart.setOption({
          title : {
            text: '项目行业分布',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}"
          },
          legend: {
            orient : 'vertical',
            x : 'left',
            data:legendNames
          },
          calculable : true,
          series: [{
            name:'行业分布',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data: data
          }]
        });
      }
    });
    $(window).resize(industryPieChart.resize);

    const year1Size = [[${#lists.size(rateBar.year1List)}]];
    if (+year1Size !== 0) {
      const legendNames = [[${rateBar.year1List}]];
      const seriesDatas = [[${rateBar.rate1List}]];
      let rate1BarChart = echarts.init(document.getElementById("rate1-bar-chart"));
      rate1BarChart.setOption({
        title : {
          text: '一年复购率'
        },
        tooltip : {
          trigger: 'axis',
          formatter: "{a} <br/>{b} : {c}%"
        },
        grid:{
          x:50,
          x2:30,
          y2:24
        },
        calculable : true,
        xAxis : [
          {
            type : 'category',
            data : legendNames
          }
        ],
        yAxis : [
          {
            type : 'value',
            axisLabel : {
              formatter: '{value} %'
            }
          }
        ],
        series: [{
          name:'一年复购率',
          type:'bar',
          barWidth: 30,
          data:seriesDatas
        }]
      });
      $(window).resize(rate1BarChart.resize);
    }
  });
</script>
<script th:inline="javascript">
  const year2Size = [[${#lists.size(rateBar.year2List)}]];
  if (+year2Size !== 0) {
    const legendNames = [[${rateBar.year2List}]];
    const seriesDatas = [[${rateBar.rate2List}]];
    let rate2BarChart = echarts.init(document.getElementById("rate2-bar-chart"));
    rate2BarChart.setOption({
      title : {
        text: '两年复购率'
      },
      tooltip : {
        trigger: 'axis',
        formatter: "{a} <br/>{b} : {c}%"
      },
      grid:{
        x:50,
        x2:30,
        y2:24
      },
      calculable : true,
      xAxis : [
        {
          type : 'category',
          data : legendNames
        }
      ],
      yAxis : [
        {
          type : 'value',
          axisLabel : {
            formatter: '{value} %'
          }
        }
      ],
      series: [{
        name:'两年复购率',
        type:'bar',
        barWidth: 30,
        data:seriesDatas
      }]
    });
    $(window).resize(rate2BarChart.resize);
  }
</script>
</body>
</html>